<template>
    <div id="index">
        <!--<swiper>-->

        <!--</swiper>-->

        <div class="block">
            <el-carousel trigger="click" height="300px">
                <el-carousel-item v-for="item in items" :key="item">
                    <a href="">
                        <img :src="item.src" alt="" width="1080px">
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="box">
            <div class="box-L">
                <div class="box-L-T"><span>爱的书籍</span><br/>爱心书籍，精神财富！</div>
                <div class="box-L-C">
                    捐赠给贫困儿童的每一本书都是无比珍贵的精神财富，爱的捐赠是世界上最温暖的精神。
                </div>
            </div>
            <div class="img1">
                <img src="../assets/images/index/book.png" />
            </div>
        </div>

        <div class="box-1">
            <div class="centent">
                <div class="centent-L-T"><span>爱的衣物</span><br/>爱心衣物，温暖捐助！</div>
                <div class="centent-L-C">
                    捐赠给贫困儿童的每一件衣物，是屋檐下的温暖，是另一个遮风挡雨的港湾，爱的捐赠，是美的精神家园。
                </div>
            </div>
        </div>

        <div class="box-2">
            <div class="text">
                <div class="text-L-T"><span>爱的工具</span><br/>学习用品，圆读书梦！</div>
                <div class="text-L-C">捐赠给贫困儿童的每一件学习用具，是教育者的希望，是土壤幼苗的春天甘露，爱的捐赠是中国人的精神家园。</div>
            </div>
        </div>

        <div class="box-3">
            <div class="SF">
                <div class="SF-L-T"><span>爱的物品</span><br/>生活用品，爱心陪伴！</div>
                <div class="SF-L-C">捐赠给贫困儿童的每一件生活用品，都是给贫困家庭孩子的一份支持，爱是永恒，多所爱，是你。
                </div>
            </div>
        </div>
        <div class="content_center">
            <p class="text"> 爱心一小步，从捐赠开始</p>
            <router-link class="buttom" to="/donation">开始捐赠</router-link>
        </div>
    </div>


</template>
<script>
    //    import Swiper from './swiper/swiper.vue'
    export default {
        data() {
            return {
                items: [{
                        src: require('./swiper/images/1.jpg'),
                        href: 'detail/analysis'
                    },
                    {
                        src: require('./swiper/images/2.jpg'),
                        href: 'detail/count'
                    },
                    {
                        src: require('./swiper/images/3.png'),
                        href: 'http://xxx.xxx.com'
                    },
                    {
                        src: require('./swiper/images/4.gif'),
                        href: 'detail/forecast'
                    }
                ]
            }
        },
        components: {
            //            Swiper
        }
    }
</script>
<style scoped>
    .swiper-inner {
        width: 100%;
        height: 400px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
    }

    .content_center {
        padding-top: 106px;
        text-align: center;
    }

    .content_center .text {
        font-size: 18px;
        font-family: "Microsoft YaHei";
        line-height: 18px;
    }

    div {
        box-sizing:content-box;
    }

    .content_center .buttom {
        display: block;
        width: 101px;
        height: 26px;
        margin: 0 auto;
        padding-top: 5px;
        text-align: center;
        font-size: 14px;
        margin-top: 35px;
        margin-bottom: 187px;
        font-family: "Microsoft YaHei";
        line-height: 14px;
        border: 1px solid #98ECF4;
        color: #98ECF4;
    }

    .content_bottom {
        height: 326px;
        background: url(../assets/images/index/u37.png) no-repeat top center;
    }

    .box {
        width: 973px;
        height: 506px;
        padding: 0 188px;
        margin: 0 auto;
    }

    .box .img1 {
        width: 365px;
        height: 363px;
        float: right;
        position: relative;
        padding-top: 130px;
    }

    .img div {
        width: 116px;
        height: 116px;
        position: absolute;
    }

    .img .pic1 {
        top: 53px;
        left: 269px;
    }

    .img .pic2 {
        top: 190px;
        left: 172px;
    }

    .img .pic3 {
        top: 357px;
        left: 170px;
    }

    .img .pic4 {
        top: 496px;
        left: 260px;
    }

    .box-L {
        width: 243px;
        height: 398px;
        padding: 150px 0 158px 70px;
        float: left;
    }

    .box-L-T {
        width: 243px;
        height: 121px;
        padding-bottom: 20px;
        font: 24px/45px "宋体";
        color: #555;
    }

    .box-L-T span {
        font: bold 56px/76px "宋体";
        color: #4a4a4a;
    }

    .box-L-C {
        width: 243px;
        height: 192px;
        font: 14px/24px "宋体";
        color: #888896;
    }

    .box-L-F {
        width: 243px;
        height: 65px;
        font: 13px/65px "宋体";
        color: #666;
        text-decoration: underline;
    }

    .box-1 {
        width: 297px;
        height: 503px;
        padding: 0 177px 0 875px;
        margin: 0 auto;
        background: url(../assets/images/index/clothes.png) no-repeat;
    }

    .centent {
        width: 297px;
        height: 373px;
        padding: 137px 0 177px;
    }

    .centent-L-T {
        width: 297px;
        height: 120px;
        padding-bottom: 21px;
        font: 24px/45px "宋体";
        color: #555;
    }

    .centent-L-T span {
        font: bold 56px/76px "宋体";
        color: #4a4a4a;
    }

    .centent-L-C {
        width: 297px;
        height: 168px;
        font: 14px/24px "宋体";
        color: #888896;
    }

    .centent-L-F {
        width: 297px;
        height: 64px;
        font: 13px/65px "宋体";
        color: #666;
        text-decoration: underline;
    }

    .box-2 {
        width: 240px;
        height: 573px;
        padding: 0 922px 0 187px;
        background: url(../assets/images/index/box-2_bg.png) no-repeat;
        margin: 0 auto;
    }

    .box-2 .text {
        width: 240px;
        height: 277px;
        padding: 208px 0 222px 0;
    }

    .text-L-T {
        width: 240px;
        height: 120px;
        padding-bottom: 21px;
        font: 24px/45px "宋体";
        color: #555;
    }

    .text-L-T span {
        font: bold 56px/76px "宋体";
        color: #4a4a4a;
    }

    .text-L-C {
        width: 240px;
        height: 72px;
        font: 14px/24px "宋体";
        color: #888896;
    }

    .text-L-F {
        width: 240px;
        height: 64px;
        font: 13px/65px "宋体";
        color: #666;
        text-decoration: underline;
    }

    .box-3 {
        width: 261px;
        height: 573px;
        padding: 0 177px 0 875px;
        background: url(../assets/images/index/box-3_bg2.png) no-repeat;
        margin: 0 auto;
    }

    .SF {
        width: 261px;
        height: 261px;
        padding: 217px 0 227px;
    }

    .SF-L-T {
        width: 261px;
        height: 120px;
        padding-bottom: 21px;
        font: 24px/45px "宋体";
        color: #555;
    }

    .SF-L-T span {
        font: bold 56px/76px "宋体";
        color: #4a4a4a;
    }

    .SF-L-C {
        width: 261px;
        height: 120px;
        font: 14px/24px "宋体";
        color: #888896;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .block {
        width: 1080px;
        margin: 0 auto;
        height: 300px;
        box-shadow: 0px 2px 5px #000;
        margin-bottom: 5px;
    }

    .block img {
        height: 300px;
    }

    #index>div {
        box-sizing: content-box;
    }
</style>